<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--
<meta property="og:title" content="GameEditor" />
<meta property="og:description" content="GameEditor for simple games" />
<meta property="og:image" content="" />
-->

<title>litegl.js: octree example</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<style type='text/css'>
		html, body { width: 100%; height: 100%; margin: 0; padding: 0 }
		body { background-color: #DDD;}
	</style>
	<script type="text/javascript" src="../external/gl-matrix.js"></script>
	<script type="text/javascript" src="../build/litegl.js"></script>
	<script type="text/javascript">

	function init()
	{
		//create the rendering context
		var container = document.body;

		var gl = GL.create({width: container.offsetWidth, height: container.offsetHeight});
		container.appendChild(gl.canvas);
		gl.animate();

		//build the mesh
		var mesh = GL.Mesh.fromURL("man.obj");
		var cam_pos = vec3.fromValues(100,200,200);
		var cam_target = vec3.fromValues(0,100,0);

		var points = [0,0,0];

		//create basic matrices for cameras and transformation
		var proj = window.proj = mat4.create();
		var view = window.view = mat4.create();
		var vp = window.vp = mat4.create();
		var identity = mat4.create();

		//set the camera perspective
		mat4.perspective(proj, 45 * DEG2RAD, gl.canvas.width / gl.canvas.height, 0.1, 1000);

		function testCollision(x,y)
		{

			mat4.multiply( vp, proj, view );

			var RT = new GL.Raytracer(vp);
			var ray = RT.getRayForPixel(x,y);
			if( !mesh || mesh.ready === false )
				return;

			if(!mesh.octree)
				mesh.octree = new GL.Octree( mesh );

			var hit = mesh.octree.testRay( cam_pos, ray, 0.01, 1000 );
			if(!hit)
				return;
			
			points.push( hit.pos[0], hit.pos[1], hit.pos[2] );
		}

		gl.captureMouse();
		gl.onmousemove = function(e)
		{
			testCollision(e.canvasx, gl.canvas.height - e.canvasy);
		}

		//basic phong shader
		var shader = new Shader('\
				precision highp float;\
				attribute vec3 a_vertex;\
				attribute vec3 a_normal;\
				varying vec3 v_normal;\
				uniform mat4 u_mvp;\
				uniform mat4 u_model;\
				void main() {\
					v_normal = (u_model * vec4(a_normal,0.0)).xyz;\
					gl_Position = u_mvp * vec4(a_vertex,1.0);\
					gl_PointSize = 10.0;\
				}\
				', '\
				precision highp float;\
				varying vec3 v_normal;\
				uniform vec3 u_lightvector;\
				uniform vec4 u_color;\
				void main() {\
				  vec3 N = normalize(v_normal);\
				  gl_FragColor = u_color * max(0.0, dot(u_lightvector,N));\
				}\
			');

		//basic phong shader
		var flat_shader = new Shader('\
				precision highp float;\
				attribute vec3 a_vertex;\
				uniform mat4 u_mvp;\
				void main() {\
					gl_Position = u_mvp * vec4(a_vertex,1.0);\
					gl_PointSize = 10.0;\
				}\
				', '\
				precision highp float;\
				uniform vec4 u_color;\
				void main() {\
				  gl_FragColor = u_color;\
				}\
			');


		//generic gl flags and settings
		gl.clearColor(0.01,0.01,0.01,1);
		gl.enable( gl.DEPTH_TEST );
		gl.enable( gl.CULL_FACE );

		var L = vec3.normalize(vec3.create(),[1.5,1.1,1.4]);

		//rendering loop
		gl.ondraw = function()
		{
			gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
			mat4.lookAt(view, cam_pos, cam_target, [0,1,0]);
			mat4.multiply(vp,proj,view); //vp

			//render mesh using the shader
			shader.uniforms({
				u_color: [1,1,1,1],
				u_lightvector: L,
				u_model: identity,
				u_mvp: vp
			}).draw(mesh);

			if(points.length)
			{
				var points_mesh = GL.Mesh.load({vertices: points});
				//render mesh using the shader
				flat_shader.uniforms({
					u_color: [1,0,0,1],
					u_lightvector: L,
					u_model: identity,
					u_mvp: vp
				}).draw(points_mesh, gl.POINTS);
			}
		};

		//update loop
		gl.onupdate = function(dt)
		{
			cam_pos[0] = Math.sin( getTime() * 0.001 ) * 100;
		};
	}
	
	</script>
</head>
<body>

<script>init();</script>
</body>
</html>